<script lang="ts" setup>
import {commonTransform} from '@/utils/transform';
import {deleteProduct, searchProduct, updateProduct} from '@/api/product';

import type {ColumnsType} from 'ant-design-vue/es/table';
import type {IProduct, ISearchParams,} from '@/types/request';
import type {TransformProduct, TransformValueOfProduct} from '@/types/table-transform';

function transformProduct(product: IProduct): TransformProduct {
    return {
        ...commonTransform(product),
    }
}

const colums = $ref<ColumnsType>([
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
        ellipsis: true,
        width: 280,
        fixed: true
    },
    {
        title: '缩略图',
        dataIndex: 'cover_img',
        key: 'cover_img',
        notShowInput: true,
        ellipsis: true,
        width: 110,
        showImage: true
    },
    {
        title: '原价',
        dataIndex: 'old_amount',
        key: 'old_amount',
        width: 100
    },
    {
        title: '现价',
        dataIndex: 'amount',
        key: 'amount',
        width: 100
    },
    {
        title: '简介',
        dataIndex: 'summary',
        key: 'summary',
        notShowInput: true,
        ellipsis: true,
        width: 100
    },
    {
        title: '浏览量',
        dataIndex: 'uv',
        key: 'uv',
        width: 150
    },
    {
        title: '购买量',
        dataIndex: 'buy_num',
        key: 'buy_num',
        width: 150
    },
    {
        title: '网盘地址',
        dataIndex: 'bd_zip_url',
        key: 'bd_zip_url',
        notShowInput: true,
        showTextarea: true,
        width: 300
    },
    {
        title: '笔记地址',
        dataIndex: 'note_url',
        key: 'note_url',
        ellipsis: true,
        notShowInput: true,
        showTextarea: true,
        width: 188
    },
    {
        title: '总评分',
        dataIndex: 'total_point',
        key: 'total_point',
        notShowInput: true,
        width: 80
    },
    {
        title: '内容实用',
        dataIndex: 'content_point',
        key: 'content_point',
        notShowInput: true,
        width: 88
    },
    {
        title: '简洁易懂',
        dataIndex: 'easy_point',
        key: 'easy_point',
        notShowInput: true,
        width: 88
    },
    {
        title: '逻辑清晰',
        dataIndex: 'logic_point',
        key: 'logic_point',
        notShowInput: true,
        width: 88
    }
])

let realDataSource = $ref<TransformProduct[]>([])

const searchParams = reactive<ISearchParams>({
    page: 1,
    size: 6,
    total: 0,
    condition: '',
})

async function handleRequest() {
    const response = await searchProduct(searchParams)
    realDataSource = response.data?.current_data?.map(item => transformProduct(item))
    return response
}

async function handleDelete(id: string) {
    return await deleteProduct(id)
}

async function handleUpdate(toUploadData: TransformValueOfProduct) {
    return await updateProduct(toUploadData)
}

// ====== Custom ======
const summaryModalInfo = $ref({
    visible: false,
    editState: false,
    currentIndex: -1,
})

function showSummaryModal(index: number, isEditor: boolean = false) {
    summaryModalInfo.visible = true
    summaryModalInfo.currentIndex = index
    summaryModalInfo.editState = isEditor
}
</script>

<template>
    <div>
        <Search name="课程" :on-search-request="handleRequest" :searchParams="searchParams"/>
        <Table custom :scroll="{ x: 1800 }" ref="table" :searchParams="searchParams" :expand-columns="colums"
               :real-data-source="realDataSource" :on-request="handleRequest" :on-update="handleUpdate"
               :on-delete="handleDelete">
            <template #default="{ column, editState, record, index }">
                <template v-if="column.key === 'summary'">
                    <a-button v-if="!editState" type="primary" @click="showSummaryModal(index)">查看</a-button>
                    <a-button v-else type="primary" @click="showSummaryModal(index, true)">修改</a-button>
                </template>
            </template>
        </Table>
        <!-- 简介弹窗 -->
        <a-modal v-model:visible="summaryModalInfo.visible"
                 :title="`${summaryModalInfo.editState ? '编辑' : '查看'}简介内容`"
                 :footer="null" width="55vw" @cancel="summaryModalInfo.visible = false">
            <div v-if="!summaryModalInfo.editState"
                 v-html="realDataSource[summaryModalInfo.currentIndex].summary.value"/>
            <Editor v-else placeholder="编辑简介内容……"
                    v-model:content="realDataSource[summaryModalInfo.currentIndex].summary.value"/>
        </a-modal>
    </div>
</template>

<style scoped>
.upload {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    z-index: 100;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    font-size: 32px;
    text-align: center;
}
</style>